<!--Created by Kangmm on 2018/11/05 17:00-->
<template>
  <!--
      * 日期选择 （年月日）
      * params:{
        trigger:''           // 触发元素                      Element                   default: -
        placement:''         // 弹出位置                      Boolean(top / top-start / top-end / bottom / bottom-start / bottom-end / left / left-start / left-end / right / right-start / right-end)                   default: bottom-end
        isShow: false        // 是否显示组件                  Boolean                    default: false
        landscape: ''        // 是否横屏显示                  Boolean                    default: true
        type: ''             // 选择的类型                    String(date/year/month)    default: date
        color: ''            // 日期选择器颜色                String                     default: -
        displayColor:''      // 时间显示区域背景色             String                     default: -
        firstDayOfWeek: ''   // 哪一天作为一个星期的开始       Number(0-6)                default: 0
        maxDate: ''          // 最大可选择日期                Date                       default: -
        minDate: ''          // 最小可选择日期                Date                       default: -
        noDisplay: ''        // 是否不存在日期或者时间显示部分  Boolean                    default: false
        timeFormat: ''       // 时间模式                      String（ampm/24hr）        default: 24hr
        viewType: ''         // 时间选择模式                  String（clock/list）        default: clock
        time: ''             // 初始化默认选择的时间，支持 .sync 修饰符  Date               default: new Date()
        date: ''             // 初始化默认选择的日期，支持 .sync 修饰符  Date               default: new Date()
        multiple: false         // date类型下多选 只支持date类型日期选择                      default: false
      }
      -->
  <mu-popover
    :open.sync="params.isShow"
    :lazy="true"
    :trigger="params.trigger"
    placement="bottom-end"
  >
    <div v-if="params.type === 'date' || params.type === 'year' || params.type === 'month'">
      <mu-date-picker
        :landscape="params.landscape"
        :type="params.type"
        :color="params.color"
        :display-color="params.displayColor"
        :first-day-of-week="params.firstDayOfWeek"
        :max-date="params.maxDate"
        :min-date="params.minDate"
        :no-display="params.noDisplay"
        :date.sync="params.date"
        :multiple="params.multiple"
        @change="selectDate"
      />
    </div>

    <div v-else-if="params.type === 'datetime'">
      <mu-date-time-picker
        :date.sync="params.date"
        :color="params.color"
        :display-color="params.displayColor"
        :first-day-of-week="params.firstDayOfWeek"
        :view="params.dateTimeView"
        :actions="true"
        :max-date="params.maxDate"
        :min-date="params.minDate"
        :format="params.timeFormat"
        :view-ype="params.viewType"
        :use-second="params.useSecond"
        @change="selectDateTime"
      />
    </div>

    <div v-else-if="params.type === 'daterange' || params.type === 'datetimerange'">
      <DateRangePanel
        :visible="params.isShow"
        :datevalue="getValue"
        :showTime="params.type === 'datetimerange'"
        v-on="$listeners"
        @handleChoosed="selectDateRange"
      />
    </div>
    <div v-else-if="params.type === 'monthrange'">
      <MonthRangePanel
        :visible="params.isShow"
        v-on="$listeners"
        @handleChoosed="selectMonthRange"
        :monthvalue="getValue"
      />
    </div>
    <div v-else-if="params.type === 'timerange'">
      <TimeRangePanel
        :timevisible="params.isShow"
        v-on="$listeners"
        @handleChoosed="selectTimeRange"
        :timevalue="getValue"
      />
    </div>

    <div v-else>
      <mu-time-picker
        :landscape="params.landscape"
        :color="params.color"
        :display-color="params.displayColor"
        :no-display="params.noDisplay"
        :format="params.timeFormat"
        :view-type="params.viewType"
        :time.sync="params.time"
        :use-second="params.useSecond"
        @change="selectTime"
      />
    </div>
  </mu-popover>
</template>

<script>

import Picker from './museUI/Picker';
import Popover from './museUI/Popover';
import DateRangePanel from './panel/date-range';
import MonthRangePanel from './panel/month-range';
import TimeRangePanel from './panel/time-range';

Vue.use(Picker);
Vue.use(Popover);
export default {
  name: 'DateTimePicker',
  components: { DateRangePanel, MonthRangePanel, TimeRangePanel },
  filters: {},
  props: {
    params: {
      type: Object,
      default: () => ({
        isShow: false,
        placement: 'bottom-end',
        trigger: '',
        type: 'datetime',
        landscape: true,
        color: '',
        displayColor: '',
        firstDayOfWeek: 0,
        maxDate: '',
        minDate: '',
        noDisplay: false,
        timeFormat: '24hr',
        viewType: 'list',
        time: new Date(),
        date: new Date(),
        dateTimeView: 'monthDay',
        dateTimeType: 'date',
        value: [],
        multiple: false,
        useSecond: false,
      }),
    },
  },
  data() {
    return {};
  },
  computed: {
    getValue() {
      return this.params.value;
    },
  },
  watch: {
  },
  mounted() {
    /* const documentHandler = function documentHandler(e) {
      if (document.querySelector('.mu-popover').contains(e.target)
      // 解决日期，月份选择 点击年或者月 选择   popover 关闭的问题
      || e.target.className === 'mu-year-button' || e.target.className === 'mu-year-button-text'
      || e.target.className === 'mu-month-button-bg' || e.target.className === 'mu-month-button-text'
      || e.target.className === 'mu-month-button'
      || e.target.className === 'mu-datepicker-toolbar-title clickable') {
        return false;
      }
    };
    setTimeout(() => {
      document.addEventListener('click', documentHandler);
    }, 0); */
  },
  methods: {
    // 当选择日期改变时触发事件
    selectDate(date) {
      this.$emit('callback', date);
      this.params.isShow = false;
    },
    // 当选择时间改变时触发事件
    selectTime(time, mode, finished) {
      if (finished) {
        if ((this.params.useSecond && mode === 'second') || (!this.params.useSecond && mode === 'minute')) {
          this.$emit('callback', time);
          this.params.isShow = false;
        }
      }
    },
    // 当选择日期时间改变时触发事件
    selectDateTime(dateTime, mode, finished) {
      // if (finished && mode === 'minute') {
      this.$emit('callback', dateTime);
      this.params.isShow = false;
      // }
    },
    selectDateRange(dateArr, visible) {
      let startDate = ''; let
        endDate = '';
      const year0 = dateArr[0].getFullYear(); const
        year1 = dateArr[1].getFullYear();
      let month0 = dateArr[0].getMonth() + 1; let
        month1 = dateArr[1].getMonth() + 1;
      let date0 = dateArr[0].getDate(); let
        date1 = dateArr[1].getDate();
      let hour0 = dateArr[0].getHours(); let
        hour1 = dateArr[1].getHours();
      let minute0 = dateArr[0].getMinutes(); let
        minute1 = dateArr[1].getMinutes();
      let second0 = dateArr[0].getSeconds(); let
        second1 = dateArr[1].getSeconds();
      if (month0 < 10) {
        month0 = `0${month0}`;
      }
      if (month1 < 10) {
        month1 = `0${month1}`;
      }
      if (date0 < 10) {
        date0 = `0${date0}`;
      }
      if (date1 < 10) {
        date1 = `0${date1}`;
      }
      if (hour0 < 10) {
        hour0 = `0${hour0}`;
      }
      if (hour1 < 10) {
        hour1 = `0${hour1}`;
      }
      if (minute0 < 10) {
        minute0 = `0${minute0}`;
      }
      if (minute1 < 10) {
        minute1 = `0${minute1}`;
      }
      if (second0 < 10) {
        second0 = `0${second0}`;
      }
      if (second1 < 10) {
        second1 = `0${second1}`;
      }
      if (this.params.type === 'daterange') {
        startDate = `${year0}-${month0}-${date0}`;
        endDate = `${year1}-${month1}-${date1}`;
      } else if (this.params.type === 'datetimerange') {
        startDate = `${year0}-${month0}-${date0} ${hour0}:${minute0}:${second0}`;
        endDate = `${year1}-${month1}-${date1} ${hour1}:${minute1}:${second1}`;
      }
      this.$emit('callback', [startDate, endDate]);
      this.params.isShow = false;
    },
    selectMonthRange(dateArr, visible) {
      let startDate = ''; let
        endDate = '';
      const year0 = dateArr[0].getFullYear(); const
        year1 = dateArr[1].getFullYear();
      let month0 = dateArr[0].getMonth() + 1; let
        month1 = dateArr[1].getMonth() + 1;
      if (month0 < 10) {
        month0 = `0${month0}`;
      }
      if (month1 < 10) {
        month1 = `0${month1}`;
      }
      startDate = `${year0}-${month0}`;
      endDate = `${year1}-${month1}`;
      this.$emit('callback', [startDate, endDate]);
      this.params.isShow = false;
    },
    selectTimeRange(dateArr, visible) {
      this.$emit('callback', dateArr);
      this.params.isShow = false;
    },
  },
};
</script>

<style>
@import "./assets/base.less";
@import "./assets/theme.less";
.mu-popover .el-picker-panel {
  margin: 0;
}
.mu-popover .el-time-range-picker__cell {
  width: 49%;
}
.mu-popover .mu-picker-actions{
  justify-content: center;
}
.mu-popover .mu-picker-actions .mu-flat-button{
  margin: 0;
}
</style>
